<template>
  <div v-for="(item, i) in column" :key="i">
    <div v-if="item.type == 'link'" class="link"></div>
    <div v-else-if="item.type == 'label'" class="title">{{ item.label }}</div>
    <div v-else-if="item.type == 'column'" class="flex">
      <div v-for="(items, k) in item.list" :key="k" class="flex-1 mb-[16px]">
        <!-- <label class="text-[#999]">{{ items.label }}</label>
        <span class="text-[#333]">{{ info[items.field] }}</span> -->
        <VText :title="items.label" :value="info[items.field]" :line="1" />
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  info: { type: Object, default: () => ({}) },
})
const column = [
  {
    type: "column",
    list: [{ label: "限制平台", field: "platform" }],
  },
  { type: "link" },
  { type: "label", label: "黑名单匹配条件1" },
  {
    type: "column",
    list: [
      { label: "收件人姓名", field: "recipient_name" },
      { label: "邮箱", field: "recipient_email" },
      { label: "收件电话", field: "recipient_phone" },
    ],
  },
  { type: "link" },
  { type: "label", label: "黑名单匹配条件2" },
  {
    type: "column",
    list: [
      { label: "国家/地区", field: "recipient_country_name" },
      { label: "州/省", field: "recipient_province" },
      { label: "城市", field: "recipient_city" },
    ],
  },
  {
    type: "column",
    list: [
      { label: "门牌号", field: "recipient_email" },
      { label: "邮编", field: "recipient_zip_code" },
    ],
  },
  {
    type: "column",
    list: [{ label: "详细地址", field: "recipient_address" }],
  },
  { type: "link" },
  {
    type: "column",
    list: [{ label: "来源订单", field: "order_sn" }],
  },
  {
    type: "column",
    list: [{ label: "拉黑理由", field: "reason" }],
  },
]
defineExpose({})
</script>
<style lang="scss" scoped>
.link {
  height: 1px;
  background: var(--base-border-color);
  margin-bottom: 16px;
}
.title {
  font-size: 16px;
  font-weight: 500;
  // color: #333;
  line-height: 22px;
  margin-bottom: 16px;
}
.flex-2 {
  flex: 2 !important;
}
</style>
